<template>
  <div style="margin-top: 20px" class="CManageClass">
    <el-tabs v-model="activeName" @tab-click="handleClick" >
      <el-tab-pane label="已完结" name="2">
        <div>
          <div class="course_div" v-for="item in courseData" :key="item.courseId">
            <div class="el-col-6 course_image_div">
              <el-image
                style="width: 100%;height: 100%"
                :src="item.imageUrl"
                fit="contain">
              </el-image>
            </div>
            <div class="el-col-18 course_detail_div">
              <div class="course_title">
                <span @click="toDetail(item.courseId)" class="show">{{item.title}}</span>
              </div>
              <div class="course_detail">
                <div class="el-col-12">
                  学习人数：
                  <span>{{item.number}}</span>
                </div>
                <div class="el-col-12">
                  <span>评分：</span>

                  <el-tooltip class="item" effect="dark" placement="top">
                    <div slot="content">评分人数：{{item.rateNumber}}人 </div>
                    <el-rate style="display: inline-block"
                             :value="item.overallRate / 2"
                             disabled
                             show-score
                             text-color="#ff9900"
                             :score-template="(item.overallRate / 2).toString()">
                    </el-rate>
                  </el-tooltip>
                </div>
              </div>
              <div class="course_divider" >
                <el-divider></el-divider>
              </div>
            </div>
          </div>
          <div class="pagination">
            <el-pagination
              @current-change="handleCurrentChange"
              :page-size="pageSize"
              :hide-on-single-page="true"
              layout="prev, pager, next"
              :total="total">
            </el-pagination>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="连载中" name="1">
        <div>
          <div class="course_div" v-for="item in courseData" :key="item.courseId">
            <div class="el-col-6 course_image_div">
              <el-image
                style="width: 100%;height: 100%"
                :src="item.imageUrl"
                fit="contain">
              </el-image>
            </div>
            <div class="el-col-18 course_detail_div">
              <div class="course_title">
                <span @click="toDetail(item.courseId)" class="show">{{item.title}}</span>
              </div>
              <div class="course_detail">
                <div class="el-col-12">
                  学习人数：
                  <span>{{item.number}}</span>
                </div>
                <div class="el-col-12">
                  <span>评分：</span>

                  <el-tooltip class="item" effect="dark" placement="top">
                    <div slot="content">评分人数：{{item.rateNumber}}人 </div>
                    <el-rate style="display: inline-block"
                             :value="item.overallRate/2"
                             :max = 5
                             disabled
                             show-score
                             text-color="#ff9900"
                             :score-template="(item.overallRate/2).toString()">
                    </el-rate>
                  </el-tooltip>
                </div>
                <div >
                  <div class="el-col-24"  style="padding: 10px 0px;text-align: right">

                    <el-tooltip class="item" effect="dark" content="更新章节" placement="bottom">
                      <el-button type="primary" icon="el-icon-edit" circle @click.stop="uploadCS(item.courseId)"></el-button>
                    </el-tooltip>

                    <el-tooltip class="item" effect="dark" content="完结" placement="bottom">
                      <el-button type="success" icon="el-icon-check" circle @click.stop="toSuccess(item.courseId)"></el-button>
                    </el-tooltip>
                  </div>
                </div>
              </div>
              <div class="course_divider" >
                <el-divider></el-divider>
              </div>
            </div>
          </div>
          <div class="pagination">
            <el-pagination
              @current-change="handleCurrentChange"
              :page-size="pageSize"
              :hide-on-single-page="true"
              layout="prev, pager, next"
              :total="total">
            </el-pagination>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="未发布" name="0">
        <div class="noDiv">
          <div class="course_div" v-for="item in courseData" :key="item.courseId">
            <div class="el-col-6 course_image_div">
              <el-image
                style="width: 100%;height: 100%"
                :src="item.imageUrl"
                fit="contain">
              </el-image>
            </div>
            <div class="el-col-18 course_detail_div">
              <div class="course_title">
                <span>{{item.title}}</span>
              </div>
              <div class="course_detail">
<!--                <div class="el-col-12">-->
<!--                  学习人数：-->
<!--                  <span>{{item.number}}</span>-->
<!--                </div>-->
<!--                <div class="el-col-12">-->
<!--                  <span>评分：</span>-->
<!--                  <el-tooltip class="item" effect="dark" placement="top">-->
<!--                    <div slot="content">评分人数：{{item.rateNumber}}人 </div>-->
<!--                    <el-rate style="display: inline-block"-->
<!--                             :value="item.overallRate/2"-->
<!--                             :max = 5-->
<!--                             disabled-->
<!--                             show-score-->
<!--                             text-color="#ff9900"-->
<!--                             :score-template="(item.overallRate/2).toString()">-->
<!--                    </el-rate>-->
<!--                  </el-tooltip>-->
<!--                </div>-->
                <div >
                  <div class="el-col-24" style="padding: 10px 0px;text-align: right">
                    <div style="display: inline-block;margin-right: 15px">
                      <div style="display: inline-block" v-if="item.reviewState == 1">
                        <el-tag type="warning">审核中</el-tag>
                      </div>
                      <div style="display: inline-block" v-if="item.reviewState == 3">
                        <el-tag type="danger">审核未通过</el-tag>
                      </div>
                    </div>
                    <el-tooltip class="item" effect="dark" content="删除" placement="bottom">
                      <el-button type="danger" icon="el-icon-delete" circle @click.stop="deleteCourse(item.courseId)"></el-button>
                    </el-tooltip>

                    <el-tooltip class="item" effect="dark" content="更新章节" placement="bottom">
                      <el-button type="primary" icon="el-icon-edit" circle @click.stop="uploadCS(item.courseId)"></el-button>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" content="编辑" placement="bottom">
                      <el-button type="info"
                                 icon="el-icon-set-up"
                                 circle
                                 @click.stop="toEditCourse(item.courseId)"></el-button>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" content="发布" placement="bottom" v-if="item.reviewState == 0 || item.reviewState == 3">
                      <el-button type="success" icon="el-icon-s-promotion" circle @click.stop="toFabu(item)"></el-button>
                    </el-tooltip>
                  </div>
                </div>
              </div>
              <div class="course_divider">
                <el-divider></el-divider>
              </div>
            </div>
          </div>
          <div class="pagination">
            <el-pagination
              @current-change="handleCurrentChange"
              :page-size="pageSize"
              :hide-on-single-page="true"
              layout="prev, pager, next"
              :total="total">
            </el-pagination>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
    <el-drawer
      title="编辑"
      size="40%"
      :visible.sync="showEdit">
      <div style="padding: 10px;text-align: left">
        <el-form v-model="courseDetailData"
                 label-position="left"
                 label-width="80px">
          <el-form-item label="名称" prop="title">
            <el-input type="input" v-model="courseDetailData.title"></el-input>
          </el-form-item>
          <div style="height: 40px;">
          <div class="el-col-12">
            <el-form-item label="课程方向" prop="directionId">
              <el-select v-model="courseDetailData.directionId" filterable placeholder="请选择" >
                <el-option
                  v-for="item in directions"
                  :key="item.directionId"
                  :label="item.name"
                  :value="item.directionId">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="el-col-12"  style="padding-left: 20px">
            <el-form-item label="课程分类" label-width="80px"  prop="sortId">
              <el-select v-model="courseDetailData.sortId" filterable placeholder="请选择">
                <el-option
                  v-for="item in sorts"
                  :key="item.sortId"
                  :label="item.name"
                  :value="item.sortId">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          </div>
          <el-form-item label="课程难度" prop="difficulty">
            <el-select v-model="courseDetailData.difficulty" placeholder="请选择" >
              <el-option
                v-for="item in difficultys"
                :key="item.difficulty"
                :label="item.name"
                :value="item.difficulty">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item  label="课程首图">
            <div style="margin-bottom: 10px">
              <el-upload
                class="upload_div"
                :auto-upload="true"
                action=""
                :show-file-list="false"
                :http-request="fileUpload"
                style="display: inline-block"
                :multiple="false">
                <el-button type="" v-loading="uploading">
                  <span>点击修改</span>
                </el-button>
              </el-upload>
            </div>
            <div >
              <el-image :src="courseDetailData.imageUrl"
                        :preview-src-list="[courseDetailData.imageUrl]"
                        style="width: 280px;height: 160px"
                        fit="fill"
              ></el-image>
            </div>
          </el-form-item>
          <el-form-item label="课程简介" prop="introduction">
            <el-input type="textarea"
                      :rows="3"
                      placeholder="请输入内容"
                      v-model="courseDetailData.introduction"
                      maxlength="200"
                      show-word-limit
                      class="textarea"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="课程须知" prop="notice">
            <el-input type="textarea"
                      :rows="3"
                      placeholder="请输入内容"
                      v-model="courseDetailData.notice"
                      maxlength="200"
                      show-word-limit
                      class="textarea"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="一句话说" prop="hotWord">
            <el-input type="textarea"
                      :rows="1"
                      placeholder="请输入内容"
                      v-model="courseDetailData.hotWord"
                      maxlength="50"
                      class="textarea"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="老师提醒" prop="teacherNotice">
            <el-input type="textarea"
                      placeholder="请输入内容"
                      :rows="3"
                      v-model="courseDetailData.teacherNotice"
                      maxlength="200"
                      show-word-limit
                      class="textarea"
            >
            </el-input>
          </el-form-item>
        </el-form>
        <div style="text-align: right">
          <el-button type="danger"
                     @click="showEdit = false"
          >
            取消
          </el-button>
          <el-button type="success"
                     @click="updateCourse"
          >
            保存
          </el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  name: 'CManageClass',
  data () {
    return {
      activeName: '2',
      value: 4.5,
      courseData: '',
      total: 0,
      pageSize: 10,
      showEdit: false,
      courseDetailData: {
        sortId: 112
      },
      sorts: [],
      directions: [],
      difficultys: [
        {
          difficulty: 1,
          name: '入门'
        },

        {
          difficulty: 2,
          name: '初级'
        },
        {
          difficulty: 3,
          name: '中级'
        },
        {
          difficulty: 4,
          name: '高级'
        }
      ],
      uploading: false
    }
  },
  mounted () {
    this.getCourseByTId(this.activeName)
    this.getPageCourse(this.activeName, 1, this.pageSize)
    this.getAllDirection()
    this.getAllSort()
  },
  methods: {
    toGet () {

    },
    // 标签点击
    handleClick (tab, event) {
      this.getCourseByTId(tab.name)
      // eslint-disable-next-line eqeqeq
      if (tab.name == 0) {
        this.getPageCourse(tab.name, 1, this.pageSize)
      } else {
        this.getPageCourse(tab.name, 1, this.pageSize)
      }
    },
    // 统计数量
    getCourseByTId (state) {
      var _this = this
      var userId = this.$store.state.user.userId
      var course = {
        userId: userId,
        state: state
      }
      this.$axios.post('/api/course/getCourseByTId',
        this.$qs.stringify({
          courseParam: JSON.stringify(course)
        }))
        .then(function (response) {
          var result = response.data
          if (result.isSuccess) {
            _this.total = result.result.length
          }
        })
    },
    // 获取课程
    getPageCourse (state, page, pageSize) {
      var _this = this
      var userId = this.$store.state.user.userId
      var courseParam = {
        userId: userId,
        state: state,
        page: page,
        pageSize: pageSize
      }
      this.$axios.post('/api/course/getCourseByTId',
        this.$qs.stringify({
          courseParam: JSON.stringify(courseParam)
        }))
        .then(function (response) {
          var result = response.data
          if (result.isSuccess) {
            _this.courseData = result.result
          }
        })
    },
    // 下方分页点击
    handleCurrentChange (page) {
      this.getPageCourse(this.activeName, page, this.pageSize)
    },
    // 跳转课程更新页
    uploadCS (courseId) {
      // 上传章节
      this.$router.push(
        {path: '/courseManageMain',
          query: {
            courseId: courseId,
            path: this.$route.fullPath
          }
        }
      )
    },
    // 删除课程
    deleteCourse (courseId) {
      var _this = this
      this.$confirm('此操作将永久删除该该课程, 是否继续?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        _this.$axios.post('/api/course/deleteCourseById',
          _this.$qs.stringify({
            'courseId': courseId
          })
        )
          .then(function (response) {
            var result = response.data
            if (result.isSuccess) {
              _this.getPageCourse(0, 1, 2, _this.pageSize)
              _this.$message({
                type: 'success',
                message: '删除成功!'
              })
            }
          })
      }).catch(() => {
        _this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    toSuccess (courseId) {
      var _this = this
      this.$axios.post('/api/course/updateCourseState',
        this.$qs.stringify({
          'courseData': JSON.stringify({
            courseId: courseId,
            state: 2
          })
        })
      )
        .then(function (response) {
          var result = response.data
          if (result.isSuccess) {
            _this.$message({
              type: 'success',
              message: '更新成功!'
            })
          } else {
            _this.$message({
              type: 'error',
              message: '失败，请重试!'
            })
          }
        })
    },
    toFabu (item) {
      var courseId = item.courseId
      var _this = this
      this.$axios.post('/api/course/updateCourseState',
        this.$qs.stringify({
          'courseData': JSON.stringify({
            courseId: courseId,
            reviewState: 1
          })
        })
      )
        .then(function (response) {
          var result = response.data
          if (result.isSuccess) {
            _this.$message({
              type: 'success',
              message: '发布成功，等待审核员审核!'
            })
            item.reviewState = 1
          } else {
            _this.$message({
              type: 'error',
              message: '失败，请重试!'
            })
          }
        })
    },
    toDetail (courseId) {
      this.$router.push(
        {path: '/learn',
          query: {
            courseId: courseId
          }
        }
      )
    },
    toEditCourse (courseId) {
      this.getCourseById(courseId)
    },
    getCourseById (courseId) {
      var _this = this
      _this.$axios.post('/api/course/getCourseBoById',
        _this.$qs.stringify({
          'courseId': courseId
        })
      )
        .then(function (response) {
          var data = response.data
          if (data.isSuccess) {
            _this.courseDetailData = data.result
            console.log(_this.courseDetailData)
            _this.showEdit = true
          } else {
            _this.$message({
              type: 'error',
              message: '获取课程详情失败，请重试!'
            })
          }
        })
    },
    getAllDirection () {
      var _this = this
      this.$axios.post('/api/direction/getAllDirection')
        .then(function (response) {
          var data = response.data
          if (data) {
            _this.directions = _this.$qs.parse(data.result)
          }
        })
    },
    getAllSort () {
      var _this = this
      this.$axios.post('/api/sort/getAllSort')
        .then(function (response) {
          var data = response.data
          if (data) {
            _this.sorts = _this.$qs.parse(data.result)
          }
        })
    },
    async fileUpload (file) {
      this.uploading = true
      var _this = this
      var host = this.$store.state.ossData.host
      var response = this.$Utils.getSignature('image')
      var requestData = new FormData()
      await response.then(res => {
        requestData = this.$Utils.fileUpload(file.file, res)
      })
      await this.$axios.post(host, requestData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        },
        onUploadProgress: progressEvent => {
          let complete = (progressEvent.loaded / progressEvent.total * 100 | 0)
          file.onProgress({percent: complete})
        }
      })
        .then(function (response) {
          // eslint-disable-next-line eqeqeq
          if (response.status == 200) {
            _this.courseDetailData.imageUrl = host + '/' + requestData.get('key')
          }
          _this.uploading = false
        })
        .catch(function () {
          _this.uploading = false
        })
    },
    updateCourse () {
      var _this = this
      _this.$axios.post('/api/course/updateCourse',
        _this.$qs.stringify({
          'courseData': JSON.stringify(this.courseDetailData)
        })
      )
        .then(function (response) {
          var data = response.data
          if (data.isSuccess) {
            _this.$message({
              type: 'success',
              message: '更新成功'
            })
          } else {
            _this.$message({
              type: 'error',
              message: '更新失败，请重试!'
            })
          }
        })
    }
  }
}
</script>

<style>
  .show {
    cursor: pointer;
  }
  .CManageClass .course_div{
    padding: 5px;
    height: 120px;
    width: 100%;
  }
  .course_image_div {
    width: 180px;
    height: 120px;
    overflow: hidden
  }
  .course_detail_div{
    height:120px;
    text-align: left;
    padding-left: 20px
  }
.course_title{
  padding: 5px 0px;
  font-size: 20px;
  font-weight: bolder;
}
  .course_detail{
    font-size: 15px;
    color: #787d82;
  }
  .course_divider{
    position: relative;
    top: 60px;
  }
  .pagination {
    margin-top: 20px;
  }
</style>
